<template>
    <div class="list">
          <div class="btn" >
              <span v-for="(item,index) in btnArr" :key="index" @click="handleClick(index)" :class="{active: currentIndex == index }">{{item}}</span>
          </div>
          <div v-if="page == 0">
          <div class="shop" v-for="(item,index) in list1" :key="index" >
              <div class="imgbox">
                  <img :src="item.picture">
              </div>
              <div class="textbox">
                  <div class="name">{{item.name}}</div>
                  <div class="intro">{{item.promotion_info}}</div>
                  <div class="bottom">
                      <div class="pricebox">
                          <span>爆爆团价</span>
                          <div class="price">
                              <div>￥<span class="money">{{item.min_price}}</span></div>
                              <div class="discount">{{item.discount}}折</div>
                          </div>
                      </div>
                      <div class="buy">
                          <div class="buy_q" @click="purchase(item,index)">{{item.lq?'已抢':'马上抢'}}</div>
                          <span>{{item.month_saled_content}}份</span>
                      </div>
                  </div>
              </div>
          </div>
          </div>
          <div v-else>
          <div class="shop" v-for="(item,index) in list2" :key="index" >
              <div class="imgbox">
                  <img :src="item.picture">
              </div>
              <div class="textbox">
                  <div class="name">{{item.name}}</div>
                  <div class="intro">{{item.promotion_info}}</div>
                  <div class="bottom">
                      <div class="pricebox">
                          <span>爆爆团价</span>
                          <div class="price">
                              <div>￥<span class="money">{{item.min_price}}</span></div>
                              <div class="discount">{{item.discount}}折</div>
                          </div>
                      </div>
                      <div class="buy">
                          <div class="buy_q" @click="purchase(item,index)">{{item.lq?'已抢':'马上抢'}}</div>
                          <span>{{item.month_saled_content}}份</span>
                      </div>
                  </div>
              </div>
          </div>
          </div>
    </div>
  </template>
  
  <script>
  import {tuan_list} from '../../utils/api'
  
  export default {
      data(){
          return {
              btnArr:['全部','待消费','待评价','退款'],
              page:0,
              list1:[],
              list2:[],
              currentIndex:0,
          }
      },
      methods:{
          purchase(item,index){
              item.lq = true;
          },
          handleClick(index){
              this.currentIndex = index;
              if(index == 0){
                  this.page = 0;
              }else if(index == 1){
                  this.page = 1;
              }
          },
      },
      mounted(){
          tuan_list({status:1}).then((res)=>{
              console.log(res.data);
              // res.data.list.push({lq:false});
              this.list1 = res.data.list;
              // for(let i =0;i<this.list1.length;i++){
              //     this.list[i].lq = false;
              // }
              console.log(this.list1);
          });
          tuan_list({status:0}).then((res)=>{
              console.log(res.data);
              this.list2 = res.data.list;
          });
      },
  }
  </script>
  
<style lang="scss" scoped>
.list{
    padding: 10px;
}
.btn{
    display: flex;
    flex-direction:row;
    justify-content:flex-start;
}
.btn span{
    display: block;
    font-size: 20px;
    margin: 0 10px;
}
.btn span.active{
    font-size: 20px;
    font-weight:bolder;
    color:orangered;
}
.shop{
    margin-top: 10px;
    position: relative;
    //   padding: 10px;
    display: flex;
}
.shop .imgbox img{
    border-radius: 5px;
    width: 100px;
    height: 100px;
}
.shop .textbox{
    margin-left: 10px;
}
.shop .textbox .name{

    font-size: 20px;
    font-weight: bold;
}
.shop .textbox .intro{
    font-size: 14px;
    font-weight: 600;
}
.shop .textbox .bottom{
    color: red;
    display: flex;
    justify-content: space-between;
}

.shop .textbox .bottom .pricebox span{
    font-size: 14px;
}
.shop .textbox .bottom .pricebox .price{
    margin-top: 10px;
    display: flex;
}
.shop .textbox .bottom .pricebox .price .money{
    font-weight: bold;
    font-size: 24px;
}
.shop .textbox .bottom .pricebox .price .discount{
    border: 1px solid red;
    margin-left: 5px;
    border-radius:5px ;
}
.shop .textbox .bottom .buy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.shop .textbox .bottom .buy .buy_q{
    padding: 5px 20px;
    position: absolute;
    top:30px;
    right: 0;
    box-sizing: border-box;
    background-color: orangered;
    border-radius: 30px;
    color: #fff;
}
.shop .textbox .bottom .buy span{
    position: absolute;
    font-size: 12px;
    bottom: 5px;
    right: 0;
}
</style>